<!--suppress ALL -->
<template>

  <span>
    <list-cpt :head-items=this.headItems :data=this.data :paged=this.paged
              :content="content"
              :postUrl="menuAddUrl" :updateUrl="menuUpdateUrl" :deleteUrl="menuDeleteUrl"
              @refreshPageSize="refreshPageSize" @refreshCurrentPage="refreshCurrentPage">

      <template #add>
        <el-tree
          :data="tree"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current>
        </el-tree>
      </template>

      <template #update>
        <el-form ref="form" :model="content">
            <el-form-item label="菜单名">
              <el-input placeholder="请输入菜单名" v-model="content.name"></el-input>
            </el-form-item>
            <el-form-item label="菜单编码">
              <el-input placeholder="请输入菜单编码" v-model="content.code" show-password></el-input>
            </el-form-item>
            <el-form-item label="菜单图标">
              <el-input placeholder="请输入菜单图标" v-model="content.icon" show-password></el-input>
            </el-form-item>
            <el-form-item label="路由路径">
              <el-input placeholder="请输入路由路径" v-model="content.path"></el-input>
            </el-form-item>
            <el-form-item label="菜单功能描述">
              <el-input placeholder="请输入菜单功能描述" v-model="content.detail"></el-input>
            </el-form-item>
         </el-form>
      </template>

    </list-cpt>
  </span>

</template>

<script>
  import ListCpt from '../../../components/ListCpt'
  import {uaaMenuItem} from '../../../components/Po'
  import {url} from '../../../common/Common.js'
  import {get} from '../../../components/HttpUtil'

  export default {
    name: 'UaaMenuPage',
    components: {ListCpt},
    data () {
      return {
        headItems: uaaMenuItem,
        paged: true,
        currentPage: 1,
        pageSize: 10,
        count: 0,
        data: {},
        menuListUrl: url.uaa.menu.list,
        menuAddUrl: url.uaa.menu.add,
        menuUpdateUrl: url.uaa.menu.update,
        menuDeleteUrl: url.uaa.menu.delete,
        menuTreeUrl: url.uaa.menu.tree,

        content: {
          id: '',
          name: '',
          code: '',
          icon: '',
          path: '',
          detail: '',
        },

        tree: [],
        level: 0,
      }
    },

    methods: {
      gainList: function () {
        var url = this.menuListUrl + '?size=' + this.pageSize + '&page=' + this.currentPage
        get(url, this.$store.state.token)
          .then(res => {
            this.data = res.data
          })
          .catch(e => {
            console.log(e)
          })
      },
      refreshPageSize (val) {
        this.currentPage = 1
        this.pageSize = val
        this.gainList()
      },

      refreshCurrentPage (val) {
        this.currentPage = val
        this.gainList()
      },
      gainMenuByLevel: function () {
        var url = this.menuTreeUrl
        get(url, this.$store.state.token)
          .then(res => {
            this.tree = res.data
          })
          .catch(e => {
            console.log(e)
          })
      },

    },

    created: function () {
      this.gainList()
      this.gainMenuByLevel()
    }

  }


</script>

